import * as echarts from 'echarts/core';
import { GridComponent, TooltipComponent } from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import { useEffect, useState } from 'react';

echarts.use([TooltipComponent, GridComponent, LineChart, CanvasRenderer, UniversalTransition]);
const Epayment = (props: { epay: number[] }) => {
  const { epay } = props;
  const [box, setBox] = useState<HTMLElement | null>(null);
  useEffect(() => {
    const node = document.getElementById('epayment');
    setBox(node);
  }, []);
  if (box !== null) {
    const options = {
      grid: {
        left: 0,
        containLabel: true,
        bottom: 10,
        top: 18,
        right: 12,
      },
      xAxis: {
        type: 'category',
        data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
        boundaryGap: false,
        splitLine: {
          show: true,
          lineStyle: {
            color: '#1d3d55',
          },
        },
        axisLabel: {
          fontWeight: 'bolder',
          color: '#818181',
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            color: '#1d3d55',
          },
        },
      },
      yAxis: {
        type: 'value',
        splitLine: {
          show: true,
          lineStyle: {
            color: '#1d3d55',
          },
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#1d3d55',
          },
        },
        scale: true,
        axisLabel: {
          fontWeight: 'bolder',
          color: '#818181',
        },
      },
      color: ['#a8071a'],
      tooltip: {
        trigger: 'axis',
      },
      series: [
        {
          data: epay,
          type: 'line',
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#a8071a',
              },
              {
                offset: 1,
                color: '#ffccc74b',
              },
            ]),
            opacity: 0.4,
            shadowBlur: 20,
          },
        },
      ],
    };
    const myChart = echarts.init(box);
    myChart.resize({ height: 200 });
    myChart.setOption(options);
  }
  return <div id="epayment" />;
};

export default Epayment;
